<template>
  <div class="personDetails">
    <div class="choose">
      <div class="checkItem">
        <input type="checkbox" @click="select($event)"    />&nbsp;<span class="checkOption">选择</span>
        <div class="options" ref="options">
          <input
            type="checkbox"
            ref="checkAll"
            v-if="showOptions"
            @change="toggleSelectAll"  
            :checked="allSelected"
          />
          <span v-if="showOptions">&nbsp;全选</span>
          <button
            class="delete"
            ref="delete"
            v-if="showOptions"
            @click="openDelete"
          >
            删除
          </button>
        </div>
      </div>
      <div class="search">
        <input
          type="text"
          v-model="searchValue"
          class="searchitem"
          placeholder="搜索"
          @keyup.enter="handleEnterKey"
        />
        <i class="iconfont icon-sousuo" @click="search" ></i>
      </div>
    </div>
    <div v-if="searchFlag" class="wrap">
      <div class="list" v-for="(item, index) in currentPageData" :key="index">
        <div class="item" @click="getRelic(item, $event)">
          <div
            class="Image"
            :style="{ backgroundImage: `url(${getImageUrl(item.image)})` }"
          ></div>
        </div>
        <div class="name">
          <span>{{ item.name }}</span>
        </div>
        <input
          type="checkbox"
          v-model="selectedItems"
          :value="item"
          v-if="showOptions"
          ref="checkRelic" 
        />
      </div>
    </div>
    <div v-else class="empty">
      暂无收藏文物信息
    </div>
  </div>
</template>
<script>
import {deleteCollection,SearchCollectionRelic} from '@/api/all'
import { Message } from 'element-ui';
export default {
  props: {
    currentPageData: {
      type: Array, //所有数据
      default() {},
    },
  },
  data() {
    return {
      checkedStatus: "",
      searchValue: "",
      showOptions: false,
      searchFlag:true,
      selectedItems:[], //存储被选中的项  
    };
  },
  watch: {
    currentPageData(newVal, oldVal) {
      // newVal是新值，oldVal是旧值
      this.currentPageData = newVal;
    },
  },
  computed: {  
    allSelected() {  
      // 判断是否所有项都被选中  
      return this.selectedItems.length === this.currentPageData.length;  
    }  
  },  
  methods: {
    getImageUrl(imageName){
      const prefix =this.$imagePrefix
      console.log(prefix)
      return `${prefix}${imageName}`;  
    },
    handleEnterKey() {
           this.search();
        },
     //刷新页面
     refreshPage() {
            window.location.reload();
      },
     openDelete() {
      if(this.selectedItems.length!==0){
        this.$confirm('确认要删除吗？记录删除后将不可恢复', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass:'set_custom_class',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this.deleteRelics();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
      },
    async search(){
      let params={
        user:{
         id:this.$store.state.login.uid,
         username:this.$store.state.login.username,
        password:this.$store.state.login.password,
       },
        searchValue:this.searchValue
      }
      await SearchCollectionRelic(params).then((res)=>{
        if(res.data.code==200){
          if(res.data.data.relicList.length==0)
          this.searchFlag=false;
          else{
            this.searchFlag=true;
            this.$emit('SearchPersonRelics',res.data.data.relicList) 
          }
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    toggleSelectAll(event) {  
      // 全选或取消全选的逻辑  
      if (event.target.checked) {  
        this.selectedItems = [...this.currentPageData]; // 全选  
      } else {  
        this.selectedItems = []; // 取消全选  
      }  
    },  
    //选择
    select(e) {
      if (e.target.checked == true) {
        //当判断复选框被选中时
        this.showOptions = true;
      } else {
        this.showOptions = false;
      }
    },
    async deleteRelics() {
      let params={
       relicList: this.selectedItems,
       user:{
         id:this.$store.state.login.uid,
         username:this.$store.state.login.username,
        password:this.$store.state.login.password,
       }
      };
      await deleteCollection(params).then((res)=>{
        if(res.data.code==200){
          this.refreshPage()
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    getRelic(item, event) {
      if (this.showOptions) event.preventDefault();
      else {
        this.$router.push({
          name: "Relic",
          query: { relic: JSON.stringify(item) },
        });
      }
    },
  },
};
</script>
   
   <style scoped>
.personDetails {
  min-height: 800px;
  background-color: #e5e2e2;
  font-size: 20px;
}
.choose {
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #f7f8f8;
}
.checkItem {
  display: flex;
  width: 600px;
  height: 40px;
  margin: 15px auto;
  margin-left: 200px;
}
.options {
  display: flex;
  width: 200px;
  height: 40px;
  margin-left: 40px;
}
.search {
  display: flex;
  width: 700px;
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
   /* flex-shrink: 0; */
  text-align: left;
  display: flex;
  justify-content: center; /* 子元素水平居中 */
  margin: 0px auto;
}
.icon-sousuo {
  color: #bdbcbc;
  font-size: 30px;
  margin-left: -50px;
}
.searchitem {
  display: flex;
  outline: none;
  border: 1px solid #aaaaaa;
  background: #f7f8f8;
  width: 300px;
  height: 40px;
  line-height: 40px;
  padding: 6px 15px;
  border-radius: 20px;
  margin-top: 10px;
  color: #505050;
  font-size: 15px;
}
.wrap {
  display: flex;
  height: auto;
  /* width: 1200px; */
  width: 80%;
  margin: 0px auto;
  margin-top: 40px;
  background-color: #e5e2e2;
  justify-content: center; /* 子元素水平居中 */
  flex-wrap: wrap;
}
.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  width: 260px;
  height: 300px;
  background: rgba(182, 184, 183, 0.2);
  margin: 20px 10px;
  position: relative;
  overflow: hidden;
}
.item {
  width: 200px;
  height: 280px;
  display: flex;
  margin: 0px auto;
}
.Image {
  background-size: cover;
  background-position: center;
  width: 200px;
  height: 280px;
  display: flex;
}
.name {
  width: 100%;
  height: 50px;
  font-size: 15px;
  background: rgba(84, 98, 91, 0.8);
  position: absolute;
  text-align: center;
  bottom: 0px;
}
.name span {
  display: inline-block;
  width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
}
.list input {
  z-index: 1;
  position: absolute;
  bottom: 13px;
  right: 5px;
}
input[type="checkbox"] {
  appearance: none; /*取消默认的复选框样式*/
  vertical-align: middle;
}
/*复选框未勾选前的样式*/
input[type="checkbox"] {
  appearance: none; /*取消默认的复选框样式*/
  /*重新写一个复选框圆角样式*/
  width: 24px; /*设置方形宽度为20px*/
  height: 24px; /*设置方形高度为20px*/
  border: 1px solid #aaaaaa; /*设置边框样式*/
  border-radius: 50%; /*将方形的边框改为圆形*/
}
/*复选框选择后的样式*/
input[type="checkbox"]:checked {
  background-image: url("../assets/images/check.png"); /*复选框选中后添加背景图片*/
  background-repeat: no-repeat; /*取消背景图片平铺*/
  background-size: 24px 24px; /*背景图片大小,第一个27px表示width宽度,第二个27px表示height高度*/
  background-position: center; /*背景图居中对齐*/
}
.delete {
  border: 1px solid rgba(42, 81, 77, 1);
  width: 80px;
  height: 35px;
  vertical-align: middle;
  border-radius: 5px;
  background: #ffffff;
  color: rgba(42, 81, 77, 1);
  margin-top: -4px;
  margin-left: 20px;
}
.delete:hover {
  color: #ffffff;
  background: rgb(50, 95, 91);
}
.checkOption{
  width:60px;
  height: 40px;
}
.empty{
  height: 700px;
  text-align: center;
  line-height: 700px;
  color:rgb(30, 57, 54);
  font-size:20px;
  }
</style>